<template>
  <div class='container'>
    <el-card>
      <!-- 上方 -->
      <el-form ref="form" :model="formsub" label-width="80px">
       <el-row :gutter="20">
        <el-form-item label="学科名称" style="font-weight=700" >
          <el-col :span="22">
            <el-input v-model="name" style="width:300px;margin-right:20px" ></el-input>
            <el-button @click="resetinp" >清除</el-button>
            <el-button type="primary" @click="this.loadlist" >搜素</el-button>
          </el-col>
          <el-col :span="1">
           <el-button type="success" class="el-icon-edit" @click="isEdit=false;dialogsubject=true">新增学科</el-button>
          </el-col>
        </el-form-item>
       </el-row>
        <el-alert  :closable="false"  class="el-icon-info" type="info" :title="`数据一共${total}条`">
        </el-alert>
      </el-form>
      <!-- 表格 -->
      <el-table
      :data="subjectList"
      style="width: 100%;">
      <el-table-column
        type="index"
        label="序号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="学科名称"
        width="100">
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建者">
      </el-table-column>
      <el-table-column
        label="创建日期">
        <template #default="{row}">
        {{getdays(row.addTime)}}
        <!-- {{row}} -->
        </template>
      </el-table-column>
      <el-table-column
        prop="isFrontDisplay"
        label="前台是否显示">
      </el-table-column>
      <el-table-column
        prop="twoLevelDirectory"
        label="二级目录"
        width="100"
        >
      </el-table-column>
      <el-table-column
        prop="tags"
        label="标签"
        width="80"
        >
      </el-table-column>
      <el-table-column
        prop="totals"
        label="题目数量">
      </el-table-column>
      <el-table-column label="操作"  width="240">
      <template #default="{row}">
        <el-button  type="text" size="small" @click="$router.push(`/subjects/directorys?id=${row.id}&name=${row.subjectName}`)">学科分类</el-button>
        <el-button type="text" size="small" @click="$router.push(`/subjects/tags?id=${row.id}&name=${row.subjectName}`)">学科标签</el-button>
        <el-button type="text" size="small" @click="edit(row)">修改</el-button>
        <el-button type="text" size="small" @click="hremove(row)">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
      <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pagesize"
      layout="->, prev, pager, next , sizes, jumper"
      :total="total"
      >
     </el-pagination>
    </el-card>
    <!-- 修改和新增的弹窗 -->
      <el-dialog
      width="40%"
      :visible.sync="dialogsubject"
      :title="isEdit?'修改':'新增'"  >
        <subjectsadd
        v-if="dialogsubject"
          @close="dialogsubject=false"
          :list="subjectList"
          :isEdit="isEdit"
          @success="hsuccess"
          :curid="id"
          :row="row"
          ></subjectsadd>
      </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import subjectsadd from '../components/subjects-add.vue'
import { list, remove } from '@/api/hmmm/subjects.js'
export default {
  components: { subjectsadd },
  data () {
    return {
      // 获取到对象的数据
      formsub: {},
      id: '', // subjectid 要传给子组件
      name: '', // input框的内容
      page: 1,
      pagesize: 10,
      isEdit: false, // false 新增 true 编辑
      dialogsubject: false, // 新增和修改的弹窗
      subjectList: [], // 保存学科列表
      total: 0, // 总条数
      row: {}// 某个学科的信息
    }
  },
  created () {
    this.loadlist()
  },
  methods: {
    // 清空input
    resetinp () {
      this.name = ''
    },
    // 编辑
    edit (row) {
      this.isEdit = true
      this.dialogsubject = true
      this.id = row.id
      this.row = row
    },
    // 成功以后关闭弹窗 重新渲染
    hsuccess () {
      this.dialogsubject = false
      this.loadlist()
    },
    // 转换时间函数
    getdays (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    },
    // 分页器
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.page = 1
      this.pagesize = val
      this.loadlist()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.loadlist()
    },
    // 获取学科列表
    async loadlist () {
      try {
        const res = await list({ page: this.page, pagesize: this.pagesize, subjectName: this.name })
        console.log('list', res)
        this.total = res.data.counts
        this.subjectList = res.data.items
      } catch (err) {
        console.log('list', err)
      }
    },
    // 删除学科
    hremove (id) {
      this.$confirm('你确定要删除吗？')
        .then(async () => {
          const res = await remove(id)
          console.log('remove', res)
          this.loadlist()
        })
        .catch(err => console.log('remove', err))
    }
  }
}
</script>

<style scoped lang='less'></style>
